import React from 'react'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/task.module.css";
import ProgressView from "../../view/ProgressView";
import Config from "../../Config";
import { Debt, Common } from "../../const/imgs";
import { repaymentRecord } from '../../service/TaskService'
import { getTOKEN, getInfo, getIDs } from '../../utils/StorageUtil'
import { NOTASK } from '../components/Default'

class DebtInfo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      repay_data: [],
      loading: false
    }
  }
  componentDidMount() {
    document.title = '债务详情'
    this.setState({ loading: true });

    repaymentRecord({
      token: getTOKEN(),
      c_id: this.props.caseId ? this.props.caseId : getIDs().caseId,
      only_self: 1
    })
      .then(
        res => {
          this.setState({ loading: false });

          this.setState({
            repay_data: res.data.data
          })
          this.props.setData(res.data)
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  render() {
    const dept_info = this.props.TaskData ? this.props.TaskData.dept_info : getInfo('TaskInfo').dept_info
    return (
      <div className={styles['home']} style={{ paddingTop: '10px' }} >
        <DebtItem debtInfo={dept_info} />
        <RepayList repayData={this.state.repay_data} />
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />

      </div>
    )
  }
}
const DebtItem = ({ debtInfo: {
  init_debt, // 初始债务金额
  overdue_day, // 逾期日期
  reward_ratio, // 奖金比例
  repayment_amount, // 已回款金额
} }) => {
  return (
    <div className={styles['debt_data']}>
      <div className={styles['debt_data_list']} style={{ lineHeight: '36px' }} >
        <div className={styles['debt_data_list_item']}>
          <span className={styles['debt_key']}>  催收金额：        </span>
          <span className={styles['debt_value']}>   {init_debt} 元       </span>
        </div>
        <div className={styles['debt_data_list_item']}>
          <span className={styles['debt_key']}>  奖金比例：        </span>
          <span className={styles['debt_value']}>  {reward_ratio / 100}%        </span>
        </div>
        <div className={styles['debt_data_list_item']}>
          <span className={styles['debt_key']}> 逾期天数：        </span>
          <span className={styles['debt_value']}>  {overdue_day}天        </span>
        </div>
        <div className={styles['debt_data_list_item']}>
          <span className={styles['debt_key']}>  总回款金额：        </span>
          <span className={styles['debt_value']}>  {repayment_amount}元        </span>
        </div>
      </div>
    </div>
  )
}

const RepayList = ({ repayData }) => {
  return (
    <div>
      <div className={styles['debt_title']} >
        <img src={Common.JILU} />
        案件回款记录
      </div>
      {repayData.length === 0 && <NOTASK />}
      {
        repayData.map((item, index) => {
          return (
            <RepayItem key={index} item={item} />
          )
        })
      }
    </div>
  )
}
const RepayItem = ({ item: {
  return_money,   // 回款金额 (分)
  create_time,    // 时间
  reward_ratio,   // 利率 (19% * 1000)
  name,           // 催客姓名
  check_status,
} }) => {
  return (
    <div className={styles['debt_item']} style={{ color: Config.fontColor }} >
      <div className={styles['debt_data']}>
        <div className={styles['debt_data_list']}>
          <div className={styles['debt_data_between']}>

            <div className={styles['debt_data_name']}>
              {name}
              
            </div>
            <div style={{color:parseInt(check_status,10)==='1'?Config.BaseColor:Config.fontColor2}}>
                {parseInt(check_status,10)===1?'已清算':'待清算'}
            </div>
          </div>
          <div className={styles['debt_data_between']}>
            <span className={styles['debt_value']}> {create_time}      </span>
            <span className={styles['debt_value']}>
              <span style={{ color: '#FFA837' }}>{return_money}元</span>
          </span>
          </div>
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    taskTab(item) {
      let params = {
        taskTabIndex: item.taskTabIndex
      };
      dispatch(Actions.actionTaskTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(DebtInfo);